<template>
	<div id="app">
		<!--       |
      <router-link to="/about">About</router-link> -->
		<el-col :span="4">
			<div class="nav">
				<el-menu
					default-active="2"
					class="el-menu-vertical-demo"
					@open="handleOpen"
					@close="handleClose"
					background-color="#545c64"
					text-color="#fff"
					active-text-color="#ffd04b"
				>
					<el-submenu index="1">
						<template slot="title">
							<i class="el-icon-location"></i>
							<span>图表</span>
						</template>
						<el-menu-item-group>
							<template slot="title">
								分组一
							</template>
							<!-- <router-link to="/about"><el-menu-item index="1-1">去about</el-menu-item></router-link> -->
							<router-link to="/home"><el-menu-item index="1-2">去home</el-menu-item></router-link>
						</el-menu-item-group>
						<el-submenu index="1-4">
							<template slot="title">
								chart图表
							</template>
							<router-link to="/chart"><el-menu-item index="1-4-1">去chart</el-menu-item></router-link>
						</el-submenu>
						<el-submenu index="1-5">
							<template slot="title">
								from表单
							</template>
							<router-link to="/from"><el-menu-item index="1-5-1">去form</el-menu-item></router-link>
						</el-submenu>
					</el-submenu>
					<router-link to="/expressapi">
						<el-menu-item index="2">
							<i class="el-icon-menu"></i>
							<span slot="title">导航二</span>
						</el-menu-item>
					</router-link>
					<el-menu-item index="4">
						<i class="el-icon-setting"></i>
						<span slot="title">导航四</span>
					</el-menu-item>
				</el-menu>
			</div>
		</el-col>
		<el-col :span="20">
			<div style="height: 20px;padding: 25px;border: 1px solid black;">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>活动管理</el-breadcrumb-item>
					<el-breadcrumb-item>活动列表</el-breadcrumb-item>
					<el-breadcrumb-item>活动详情</el-breadcrumb-item>
				</el-breadcrumb>
			</div>

			<router-view />
		</el-col>
	</div>
</template>

<style lang="scss">
html,
body {
	margin: 0;
	padding: 0;
}
.nav {
	height: 100%;
}
a {
	text-decoration: none;
}
</style>
<script>
export default {
	methods: {
		handleOpen(key, keyPath) {
			console.log(key, keyPath);
		},
		handleClose(key, keyPath) {
			console.log(key, keyPath);
		}
	}
};
</script>
